<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <header class="layout-header">
      <div class="header-content">
        <!-- Logo区域 -->
        <div class="logo-section">
          <img src="@/assets/pan.jpg" alt="网盘Logo" class="logo" />
          <span class="app-title">云存储网盘</span>
        </div>

        <!-- 导航菜单 -->
        <nav class="nav-menu hidden-xs">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            class="header-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="/shouye">
              <span>🏠 首页</span>
            </el-menu-item>
            <el-menu-item index="/files">
              <span>📁 文件管理</span>
            </el-menu-item>
            <el-menu-item index="/fileupload">
              <span>📤 上传</span>
            </el-menu-item>
            <el-menu-item index="/share">
              <span>🔗 分享</span>
            </el-menu-item>
            <el-menu-item index="/new">
              <span>➕ 新建</span>
            </el-menu-item>
          </el-menu>
        </nav>

        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn hidden-sm" @click="toggleMobileMenu">
          <span>☰</span>
        </div>

        <!-- 用户区域 -->
        <div class="user-section">
          <!-- 搜索框 -->
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索文件..."
              @keyup.enter="handleSearch"
              clearable
            >
              <template #prefix>🔍</template>
            </el-input>
          </div>

          <!-- 用户菜单 -->
          <el-dropdown @command="handleUserCommand">
            <div class="user-info">
              <el-avatar :size="32" :src="userAvatar">👤</el-avatar>
              <span class="username">{{ username }}</span>
              <span class="dropdown-icon">▼</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  👤 个人信息
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  ⚙️ 设置
                </el-dropdown-item>
                <el-dropdown-item command="storage">
                  📊 存储管理
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  🚪 退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <div class="layout-main">
      <!-- 侧边栏 -->
      <aside class="layout-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <h3 v-if="!sidebarCollapsed">文件管理</h3>
          <el-button
            type="text"
            class="collapse-btn"
            @click="toggleSidebar"
          >
            {{ sidebarCollapsed ? '📖' : '📕' }}
          </el-button>
        </div>

        <nav class="sidebar-nav">
          <el-menu
            :default-active="$route.path"
            :collapse="sidebarCollapsed"
            class="sidebar-menu"
            router
          >
            <!-- 我的文件 -->
            <el-sub-menu index="myfiles">
              <template #title>
                <span>📁 我的文件</span>
              </template>
              <el-menu-item index="/myfile/pic">
                <span>🖼️ 图片</span>
              </el-menu-item>
              <el-menu-item index="/myfile/videos">
                <span>🎬 视频</span>
              </el-menu-item>
              <el-menu-item index="/myfile/audio">
                <span>🎵 音频</span>
              </el-menu-item>
              <el-menu-item index="/myfile/doc">
                <span>📄 文档</span>
              </el-menu-item>
              <el-menu-item index="/myfile/others">
                <span>📦 其他</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 文件管理 -->
            <el-sub-menu index="management">
              <template #title>
                <span>🛠️ 文件管理</span>
              </template>
              <el-menu-item index="/userfolders">
                <span>📂 文件夹</span>
              </el-menu-item>
              <el-menu-item index="/huishou">
                <span>🗑️ 回收站</span>
              </el-menu-item>
              <el-menu-item index="/rongliang">
                <span>📊 容量管理</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 系统功能 -->
            <el-sub-menu index="system">
              <template #title>
                <span>⚙️ 系统功能</span>
              </template>
              <el-menu-item index="/userinfo">
                <span>👤 个人信息</span>
              </el-menu-item>
              <el-menu-item index="/help">
                <span>❓ 帮助中心</span>
              </el-menu-item>
              <el-menu-item index="/about">
                <span>ℹ️ 关于我们</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </nav>
      </aside>

      <!-- 内容区域 -->
      <main class="layout-content">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-section">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/shouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="item in breadcrumbItems"
              :key="item.path"
              :to="item.path ? { path: item.path } : undefined"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
          <router-view />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
// 图标将在模板中直接使用字符串名称

const route = useRoute();
const router = useRouter();

// 响应式数据
const activeIndex = ref(route.path);
const sidebarCollapsed = ref(false);
const mobileMenuVisible = ref(false);
const searchKeyword = ref('');
const username = ref(localStorage.getItem('username') || '用户');
const userAvatar = ref('');

// 计算属性
const breadcrumbItems = computed(() => {
  const pathArray = route.path.split('/').filter(Boolean);
  const items = [];
  
  // 根据路径生成面包屑
  const routeMap = {
    'myfile': '我的文件',
    'pic': '图片',
    'videos': '视频',
    'audio': '音频',
    'doc': '文档',
    'others': '其他',
    'userfolders': '文件夹管理',
    'huishou': '回收站',
    'rongliang': '容量管理',
    'userinfo': '个人信息',
    'help': '帮助中心',
    'about': '关于我们',
    'fileupload': '文件上传',
    'share': '文件分享',
    'new': '新建文件夹'
  };
  
  let currentPath = '';
  pathArray.forEach(segment => {
    currentPath += `/${segment}`;
    if (routeMap[segment]) {
      items.push({
        name: routeMap[segment],
        path: currentPath
      });
    }
  });
  
  return items;
});

// 监听路由变化
watch(() => route.path, (newPath) => {
  activeIndex.value = newPath;
});

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value;
};

const handleMenuSelect = (index) => {
  router.push(index);
};

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    // 跳转到文件管理页面并传递搜索参数
    router.push({
      path: '/files',
      query: { search: searchKeyword.value }
    });
  } else {
    // 如果搜索为空，直接跳转到文件管理页面
    router.push('/files');
  }
};

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/userinfo');
      break;
    case 'settings':
      ElMessage.info('设置功能开发中...');
      break;
    case 'storage':
      router.push('/rongliang');
      break;
    case 'logout':
      localStorage.clear();
      router.push('/login');
      ElMessage.success('已退出登录');
      break;
  }
};
</script>

<style lang="less" scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-header {
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  
  .header-content {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .logo-section {
    display: flex;
    align-items: center;
    margin-right: 40px;
    
    .logo {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      margin-right: 12px;
    }
    
    .app-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .nav-menu {
    flex: 1;
    
    .header-menu {
      border-bottom: none;
      
      .el-menu-item {
        height: 60px;
        line-height: 60px;
        border-bottom: 2px solid transparent;
        
        &:hover, &.is-active {
          border-bottom-color: #409eff;
          background: transparent;
        }
      }
    }
  }
  
  .user-section {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .search-box {
      width: 240px;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s;
      
      &:hover {
        background: #f5f7fa;
      }
      
      .username {
        font-size: 14px;
        color: #606266;
      }
      
      .dropdown-icon {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.layout-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.layout-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  transition: width 0.3s;
  
  &.collapsed {
    width: 64px;
  }
  
  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    
    .collapse-btn {
      padding: 4px;
    }
  }
  
  .sidebar-nav {
    height: calc(100% - 60px);
    overflow-y: auto;
    
    .sidebar-menu {
      border-right: none;
      
      .el-sub-menu__title,
      .el-menu-item {
        height: 48px;
        line-height: 48px;
      }
    }
  }
}

.layout-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .breadcrumb-section {
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .page-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f5f7fa;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .layout-header {
    .header-content {
      padding: 0 15px;
    }
    
    .logo-section {
      margin-right: 20px;
      
      .app-title {
        display: none;
      }
    }
    
    .nav-menu {
      display: none;
    }
    
    .user-section {
      .search-box {
        width: 180px;
      }
    }
  }
  
  .layout-sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s;
    
    &.show {
      transform: translateX(0);
    }
  }
  
  .layout-content {
    margin-left: 0;
  }
}
</style>
